<template>
    <div class="QilinView">
        <div
            class="QilinView-header"
            v-if="ownViewConfig.headerConfig && !ownViewConfig.headerConfig.hideHeader"
        >
            {{(ownViewConfig.headerConfig && ownViewConfig.headerConfig.headerText) || "基本信息" }}
        </div>
        <div class="QilinView-content">
            <el-row
                :class="[
                    'QilinView-content-row',
                    (ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ? 'table' : ''
                ]"
            >
                <template
                    v-for="(item,index) in ownViewConfig.itemConfig"
                >
                    <el-col
                        v-if="
                            item.isHide ? false :
                            item.isHideFn ? item.isHideFn(item,ownViewConfig.viewData[item.value]) : true
                        "
                        :key="item.value || 'view-key'+index "
                        :span="item.col || 8"
                        :class="[
                            'QilinView-content-row-col',
                            item.className
                        ]"
                    >
                        <template v-if="!item.labelEllipsis && !item.hideLabel">
                            <label
                                :class="[
                                    'QilinView-content-row-col-label',
                                    item.textarea ? 'textarea' : ''
                                ]"
                                :style="{
                                    height:item.textarea ? (item.rows || 2)* 40 + 20 + 'px' : 'auto',
                                    backgroundColor:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ?
                                        ownViewConfig.globalConfig.labelBackgroundColor || '#FAFAFA' : '',
                                    color:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ?
                                        ownViewConfig.globalConfig.labelColor || 'rgba(0,0,0,0.85)' : ''
                                }"
                            >
                                <span>{{item.label || "默认label"}}
                                    {{(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ? item.labelSuffix || "" : "："}}
                                </span>
                            </label>
                        </template>
                        <template v-else-if="item.labelEllipsis && !item.hideLabel">
                            <el-tooltip
                                :placement="item.labelEllipsisPlacement || 'left' "
                                :effect="item.labelEllipsisEffect || 'dark' "
                            >
                                <template v-slot:content>
                                    <span>{{item.label || "默认label"}}
                                        {{(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ? item.labelSuffix || "" : "："}}
                                    </span>
                                </template>
                                <label
                                    :class="[
                                        'QilinView-content-row-col-label',
                                        item.textarea ? 'textarea' : ''
                                    ]"
                                    :style="{
                                        height:item.textarea ? (item.rows || 2)* 40 + 20 +'px' : 'auto',
                                        backgroundColor:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ?
                                            ownViewConfig.globalConfig.labelBackgroundColor || '#FAFAFA' : '',
                                        color:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ?
                                            ownViewConfig.globalConfig.labelColor || 'rgba(0,0,0,0.85)' : ''
                                    }"
                                >
                                    <span class="ellipsis">{{item.label || "默认label"}}
                                        {{(ownViewConfig.globalConfig && ownViewConfig.globalConfig.isTable) ? item.labelSuffix || "" : "："}}
                                    </span>
                                </label>
                            </el-tooltip>
                        </template>
                        <span
                            v-if="!item.valueEllipsis"
                            :class="[
                                'QilinView-content-row-col-value'
                            ]"
                            :style="{
                                color:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.valueColor) || ''
                            }"
                        >
                            <template v-if="!item.type || item.type === 'text' ">
                                <span
                                    :class="item.textarea ? 'textarea' : ''"
                                    :style="{
                                        height:item.textarea ? (item.rows || 2)* 40 +'px' : 'auto'
                                    }"
                                >
                                    {{[null,undefined].includes(ownViewConfig.viewData[item.value]) ? "-" : ownViewConfig.viewData[item.value]}}
                                </span>
                            </template>
                            <template v-else-if="item.type === 'date' ">
                                <span>{{getDate(ownViewConfig.viewData[item.value],item.format)}}</span>
                            </template>
                            <template v-else-if="item.type === 'link' ">
                                <span
                                    v-if="ownViewConfig.viewData[item.value]"
                                    class="link"
                                    @click="item.click && item.click(item,ownViewConfig.viewData[item.value])"
                                >
                                    {{ownViewConfig.viewData[item.value]}}
                                </span>
                                <span v-else>{{"-"}}</span>
                            </template>
                            <template v-else-if="item.type === 'image' ">
                                <template
                                    v-if="
                                        ownViewConfig.viewData[item.value] &&  ownViewConfig.viewData[item.value].length > 0
                                    "
                                >
                                    <span
                                        v-for="(imgItem,imgIndex) in ownViewConfig.viewData[item.value]"
                                        :key="
                                            item.isImageArrayString ? 'image-key-'+imgIndex : (imgItem[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ] || 'image-key-'+imgIndex)
                                        "
                                    >
                                        <el-image
                                            :src="
                                                item.imageIp || '' + (item.isImageArrayString ? imgItem : imgItem[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ])
                                            "
                                            :preview-src-list="ownViewConfig.viewData[item.value].map((ite)=>{
                                                return item.imageIp || '' + (item.isImageArrayString ? ite : ite[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ]);
                                            })"
                                            :initial-index="ownViewConfig.viewData[item.value].findIndex((ite)=>{
                                                return item.isImageArrayString ? imgItem === ite : imgItem[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ] === ite[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ];
                                            })"
                                            :fit="item.imageFit || 'contain' "
                                        ></el-image>
                                    </span>
                                </template>
                                <span v-else>暂无图片</span>
                            </template>
                            <template v-else-if="item.type === 'file' ">
                                <template
                                    v-if="
                                        ownViewConfig.viewData[item.value] && ownViewConfig.viewData[item.value].length > 0
                                    "
                                >
                                    <span
                                        v-for="(fileItem,fileIndex) in ownViewConfig.viewData[item.value]"
                                        :key="
                                            item.isImageArrayString ? 'file-key-'+fileIndex : (fileItem[ (item.imageOptions && item.imageOptions.serverUrl) || 'fileName' ] || 'file-key-'+fileIndex)
                                        "
                                        class="file"
                                        @click="item.click && item.click(fileItem,ownViewConfig.viewData[item.value])"
                                    >
                                        {{ item.isImageArrayString ? fileItem : fileItem[ (item.imageOptions && item.imageOptions.serverOriginalName) || "originalFilename"] }}
                                        <span style="color:#000;">
                                            {{fileIndex !== ownViewConfig.viewData[item.value].length-1 ? "&nbsp;、&nbsp;" : ""}}
                                        </span>
                                    </span>
                                </template>
                                <span v-else>暂无附件</span>
                            </template>
                            <template v-else-if="item.type === 'slot' ">
                                <slot :name="item.slotName" :data="{item,data:ownViewConfig.viewData[item.value]}"></slot>
                            </template>
                        </span>
                        <template v-else>
                            <el-tooltip
                                :placement="item.valueEllipsisPlacement || 'top' "
                                :effect="item.valueEllipsisEffect || 'dark' "
                            >
                                <template v-slot:content>
                                    <span>
                                        {{[null,undefined].includes(ownViewConfig.viewData[item.value]) ? "-" : ownViewConfig.viewData[item.value]}}
                                    </span>
                                </template>
                                <span
                                    class="QilinView-content-row-col-value"
                                    :style="{
                                        color:(ownViewConfig.globalConfig && ownViewConfig.globalConfig.valueColor) || ''
                                    }"
                                >
                                    <span class="ellipsis">{{[null,undefined].includes(ownViewConfig.viewData[item.value]) ? "-" : ownViewConfig.viewData[item.value]}}</span>
                                </span>
                            </el-tooltip>
                        </template>
                    </el-col>
                </template>
            </el-row>
        </div>
    </div>
</template>

<script>
import Qilin from "qilin-utils";
export default {
    name:"QilinView",
    props:{
        viewConfig:{
            type:Object,
            default(){
                return {
                    globalConfig:{
                        isTable:false, //是否为表格形式
                        labelBackgroundColor:"#FAFAFA", //label标签的背景颜色
                        labelColor:"rgba(0,0,0,0.85)", //label标签的字体颜色
                        valueColor:"rgba(0,0,0,0.65)", //value所在元素的字体颜色
                    },
                    headerConfig:{
                        hideHeader:false, //是否隐藏头部标题部分元素
                        headerText:"", //头部标题内容
                    },
                    itemConfig:[
                        {
                            type:"text", //显示数据类型
                            textarea:false, //text类型是否是textarea
                            rows:2, //textarea时的高度，默认为2
                            slotName:"", //slot元素的name，当且仅当type为slot时需要
                            format:"", //显示日期格式配置项，当且仅当type为date时需要
                            label:"姓名", //显示label字段名称
                            value:"name", //显示数据名称--对应viewData
                            col:8, //栅栏格数--默认8
                            className:"", //额外添加在el-col元素上的类名
                            labelSuffix:"", //label名称后缀符号，默认为空字符串
                            labelEllipsis:false, //若label名过长是否设置隐藏悬浮显示--默认false
                            labelEllipsisPlacement:"left", //label超出长度悬浮提示位置
                            labelEllipsisEffect:"dark", //label超出长度悬浮提示样式类型
                            valueEllipsis:false, //若value数据过长是否设置隐藏悬浮提示--默认false
                            valueEllipsisPlacement:"top", //value数据超出长度悬浮提示位置
                            valueEllipsisEffect:"dark", //value数据超出长度悬浮提示样式类型
                            // valueStyle:"", //value的行内自定义样式
                            isHide:false, //是否隐藏该项
                            hideLabel:false, //是否隐藏label字段名称
                            click:"", //点击事件
                            isHideFn:"", //判断当前项是否隐藏的方法
                            isImageArrayString:false, //传入的图片或文件数据类型是对象数组还是字符串数组--默认为字符串数组
                            imageFit:"contain", //图片的适应类型--默认contain
                            imageIp:"", //设置查看图片或文件的服务器ip
                            imageOptions:{ //查看图片或文件时的设置配置项--仅当type=image/type=file时生效
                                serverOriginalName:"originalFilename", //原始文件名称
                                serverName:"newFileName", //回显文件的名称
                                serverUrl:"fileName", //回显文件的url
                            }
                        }
                    ],
                    viewData:{
                        name:"数据"
                    }
                }
            }
        }
    },
    data(){
        return {

        }
    },
    computed:{
        ownViewConfig:{
            get(){
                return this.viewConfig;
            },
            set(val){
                this.$emit("update:viewConfig",val);
            }
        },
        getDate(){
            return function(date,format){
                if(!date){
                    return "-";
                };
                return Qilin.Date.formatDate(date, format);
            };
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.QilinView{
    width:100%;
    >.QilinView-header{
        padding-bottom:15px;
        border-bottom:1px solid $border-color;
        color:$common-text-color;
        font-weight:bolder;
    }
    >.QilinView-content{
        padding:20px;
        >.QilinView-content-row{
            display:flex;
            flex-wrap:wrap;
            >.QilinView-content-row-col{
                // width:100%;
                margin-bottom:12px;
                display:flex;
                align-items:center;
                >.QilinView-content-row-col-label{
                    display:flex;
                    align-items:center;
                    width:auto;
                    color:$common-text-color;
                    max-width:200px;
                    height:100%;
                    >span{
                        &.ellipsis{
                            display:inline-block;
                            width:100%;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                        }
                    }
                }
                >.QilinView-content-row-col-value{
                    flex:1;
                    min-width:0;
                    color:$support-text-color;
                    display:flex;
                    align-items:center;
                    >span{
                        display:inline-block;
                        height:auto;
                        cursor:default;
                        >.el-image{
                            width:100px;
                            height:100px;
                            margin:5px;
                            border-radius:4px;
                        }
                        &.link{
                            color:$primary-text-color;
                            cursor:pointer;
                        }
                        &.file{
                            color:$primary-text-color;
                            cursor:pointer;
                            // text-decoration: underline;
                        }
                        &.textarea{
                            display:inline-block;
                            width:100%;
                        }
                        &.ellipsis{
                            display:inline-block;
                            width:100%;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis;
                        }
                    }
                }
            }
            &.table{
                border:1px solid $border-color;
                border-left:none;
                overflow:hidden;
                border-radius:6px;
                >.QilinView-content-row-col{
                    display:flex;
                    border:1px solid $border-color;
                    border-left:none;
                    border-right:none;
                    border-bottom:none;
                    margin-top:-1px;
                    margin-bottom:0;
                    display:flex;
                    align-items:stretch;
                    &:first-of-type{
                        border-radius:6px 0 0 0;
                        >.QilinView-col-label{
                            border-radius:6px 0 0 0;
                        }
                    }
                    >.QilinView-content-row-col-label{
                        border-left:1px solid $border-color;
                        border-right:1px solid $border-color;
                        padding: 10px 12px;
                        display:flex;
                        align-items:center;
                        width:50%;
                        color:$common-text-color;
                        // background-color:#FAFAFA;
                        height:100%;
                        >span{
                            &.ellipsis{
                                display:inline-block;
                                width:100%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                        }
                    }
                    >.QilinView-content-row-col-value{
                        width:50%;
                        color:$support-text-color;
                        padding:10px;
                        >span{
                            &.textarea{
                                display:inline-block;
                                width:100%;
                            }
                            &.ellipsis{
                                display:inline-block;
                                width:100%;
                                white-space:nowrap;
                                overflow:hidden;
                                text-overflow:ellipsis;
                            }
                            &.link{
                                color:$primary-text-color;
                                cursor:pointer;
                                // text-decoration: underline;
                            }
                            &.file{
                                color:$primary-text-color;
                                cursor:pointer;
                                // text-decoration: underline;
                            }
                        }
                    }
                    &.el-col-24{
                        >label{
                            width:16.665%;
                        }
                        >span{
                            width:83.335%;
                        }
                    }
                    &.el-col-16{
                        >label{
                            width:25%;
                        }
                        >span{
                            width:75%;
                        }
                    }
                    &.el-col-12{
                        >label{
                            width:33.333%;
                        }
                        >span{
                            width:66.667%;
                        }
                    }
                    &.el-col-8{
                        >label{
                            width:50%;
                        }
                        >span{
                            width:50%;
                        }
                    }
                    &.el-col-6{
                        >label{
                            width:66.5%;
                        }
                        >span{
                            width:33.5%;
                        }
                    }
                }
            }
        }
    }
}
</style>
